﻿<nz-card [nzBordered]="false">
  <form nz-form [formGroup]="validateForm" *ngIf="active">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>
        <span>
         商品名称
         <i nz-icon nz-tooltip nzTitle="请输入商品名称" type="question-circle" theme="outline"></i>
       </span>
     </nz-form-label>
     <nz-form-control [nzSm]="14" [nzXs]="24">
      <input nz-input id="name" formControlName="name" [(ngModel)]="product.name" >
      <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入商品名称!</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sku" nzRequired>
        <span>
         商家SKU
         <i nz-icon nz-tooltip nzTitle="请输入商家SKU" type="question-circle" theme="outline"></i>
       </span>
     </nz-form-label>
     <nz-form-control [nzSm]="14" [nzXs]="24">
      <input nz-input id="sku" formControlName="sku" [(ngModel)]="product.sku" >
      <nz-form-explain *ngIf="validateForm.get('sku').dirty && validateForm.get('sku').errors">请输入商家SKU!</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item >
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="categoryId" nzRequired>
      <span>
        商品分类
        <i nz-icon nz-tooltip nzTitle="请选择商品分类" type="question-circle" theme="outline"></i>
      </span>
    </nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <nz-select  formControlName="categoryId"  [(ngModel)]="product.categoryId" nzAllowClear nzPlaceHolder="请选择商品分类">
        <nz-option *ngFor="let option of optionList" [nzValue]="option.value" [nzLabel]="option.label"></nz-option>
      </nz-select>
      <nz-form-explain *ngIf="validateForm.get('categoryId').dirty && validateForm.get('categoryId').errors">请选择商品分类!</nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" >
        <span>
          商品主图
          <i nz-icon nz-tooltip nzTitle="图文信息，选择上次图片" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-upload
          [nzAction]="fileUploadUrl"
          nzListType="picture-card"
          [(nzFileList)]="fileList"
          [nzShowButton]="fileList.length < 5"
          (nzChange)="handleChange($event)"
          [nzPreview]="handlePreview">
          <i nz-icon type="plus"></i>
          <div class="ant-upload-text">Upload</div>
        </nz-upload>
        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
          <ng-template #modalContent>
            <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
          </ng-template>
        </nz-modal>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="content" nzRequired>
        <span>
         商品详情
         <i nz-icon nz-tooltip nzTitle="请输入商品详情" type="question-circle" theme="outline"></i>
       </span>
     </nz-form-label>
     <nz-form-control [nzSm]="14" [nzXs]="24">
      <ckeditor [editor]="Editor" formControlName="content"  [config]="config" [(ngModel)]="product.content"></ckeditor> 
      <nz-form-explain *ngIf="validateForm.get('content').dirty && validateForm.get('content').errors">请输入商品详情!</nz-form-explain>
    </nz-form-control>
    </nz-form-item>
    <nz-form-item>
          <nz-form-label [nzSpan]="6"  nzFor="price" nzRequired>
            <span>
             销售价格
             <i nz-icon nz-tooltip nzTitle="请输入销售价格" type="question-circle" theme="outline"></i>
           </span>
         </nz-form-label>
         <nz-form-control [nzSpan]="6" >
          <nz-input-number id="price" formControlName="price" [nzMin]="1" [(ngModel)]="product.price" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
          <nz-form-explain *ngIf="validateForm.get('price').dirty && validateForm.get('price').errors">请输入销售价格!</nz-form-explain>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="oldPrice" nzRequired>
          <span>
           商品原价
           <i nz-icon nz-tooltip nzTitle="请输入商品原价" type="question-circle" theme="outline"></i>
         </span>
       </nz-form-label>
       <nz-form-control [nzSpan]="6">
          <nz-input-number id="oldPrice" formControlName="oldPrice" [nzMin]="1" [(ngModel)]="product.oldPrice" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
          <nz-form-explain *ngIf="validateForm.get('oldPrice').dirty && validateForm.get('oldPrice').errors">请输入商品原价!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

<nz-form-item>
  <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="productCost" nzRequired>
    <span>
     成本价格
     <i nz-icon nz-tooltip nzTitle="请输入成本价格" type="question-circle" theme="outline"></i>
   </span>
 </nz-form-label>
 <nz-form-control [nzSm]="14" [nzXs]="24">
    <nz-input-number id="productCost" formControlName="productCost" [nzMin]="1" [(ngModel)]="product.productCost" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
    <nz-form-explain *ngIf="validateForm.get('productCost').dirty && validateForm.get('productCost').errors">请输入成本价格!</nz-form-explain>
  </nz-form-control>
</nz-form-item>


  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="stockQuantity" nzRequired>
      <span>
       库存数量
       <i nz-icon nz-tooltip nzTitle="请输入库存数量" type="question-circle" theme="outline"></i>
     </span>
   </nz-form-label>
   <nz-form-control [nzSm]="14" [nzXs]="24">
      <nz-input-number id="stockQuantity" formControlName="stockQuantity" [nzMin]="1" [(ngModel)]="product.stockQuantity" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
    <nz-form-explain *ngIf="validateForm.get('stockQuantity').dirty && validateForm.get('stockQuantity').errors">请输入库存数量!</nz-form-explain>
  </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="soldQuantity">
      <span>
       已售数量
       <i nz-icon nz-tooltip nzTitle="请输入已售数量" type="question-circle" theme="outline"></i>
     </span>
   </nz-form-label>
   <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-input-number id="soldQuantity" formControlName="soldQuantity" [nzMin]="1" [(ngModel)]="product.soldQuantity" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
    <nz-form-explain *ngIf="validateForm.get('soldQuantity').dirty && validateForm.get('soldQuantity').errors">请输入已售数量!</nz-form-explain>
  </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="keywords"> 关键字</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['keywords']">
      <textarea  formControlName="keywords" id="'keywords'" [(ngModel)]="product.keywords" nz-input rows="2" placeholder="请输入 关键字!"></textarea>
      <nz-form-explain *ngIf="validateForm.get('keywords').dirty && validateForm.get('keywords').errors">请输入 关键字!</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="weight">
      <span>
       重量
       <i nz-icon nz-tooltip nzTitle="请输入重量" type="question-circle" theme="outline"></i>
     </span>
   </nz-form-label>
   <nz-form-control [nzSm]="14" [nzXs]="24">
    <nz-input-number id="weight" formControlName="weight" [nzMin]="1" [(ngModel)]="product.weight" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
    <nz-form-explain *ngIf="validateForm.get('weight').dirty && validateForm.get('weight').errors">请输入重量!</nz-form-explain>
  </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="length">
      <span>
       长度
       <i nz-icon nz-tooltip nzTitle="请输入长度" type="question-circle" theme="outline"></i>
     </span>
   </nz-form-label>
   <nz-form-control [nzSm]="14" [nzXs]="24">
      <nz-input-number id="length" formControlName="length" [nzMin]="1" [(ngModel)]="product.length" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
    <nz-form-explain *ngIf="validateForm.get('length').dirty && validateForm.get('length').errors">请输入长度!</nz-form-explain>
  </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="width">
      <span>
       宽度
       <i nz-icon nz-tooltip nzTitle="请输入宽度" type="question-circle" theme="outline"></i>
     </span>
   </nz-form-label>
   <nz-form-control [nzSm]="14" [nzXs]="24">
    <nz-input-number id="width" formControlName="width" [nzMin]="1" [(ngModel)]="product.width" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
    <nz-form-explain *ngIf="validateForm.get('width').dirty && validateForm.get('width').errors">请输入宽度!</nz-form-explain>
  </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="height">
      <span>
       高度
       <i nz-icon nz-tooltip nzTitle="请输入高度" type="question-circle" theme="outline"></i>
     </span>
   </nz-form-label>
   <nz-form-control [nzSm]="14" [nzXs]="24">
      <nz-input-number id="height" formControlName="height" [nzMin]="1" [(ngModel)]="product.height" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
    <nz-form-explain *ngIf="validateForm.get('height').dirty && validateForm.get('height').errors">请输入高度!</nz-form-explain>
  </nz-form-control>
  </nz-form-item>


  <nz-form-item nz-row style="margin-bottom: 8px;">
    <nz-form-control [nzSpan]="14" [nzOffset]="6">
      <a nz-button nzType="default" routerLink="/product/list">取消</a>
      <button nz-button type="submit" [nzType]="'primary'" (click)="handleSave()" [nzLoading]="isConfirmLoading">保存</button>
    </nz-form-control>
  </nz-form-item>
</form>
</nz-card>
